async function getIconOverview() {
  const result = await axios({ url: "/student/overview" });
  //   console.log(result);
  const { total, avgSalary, avgAge, proportion } = result.data.data;
  document.querySelector(".total").innerHTML = total;
  document.querySelector(".avgSalary").innerHTML = avgSalary;
  document.querySelector(".avgAge").innerHTML = avgAge;
  document.querySelector(".proportion").innerHTML = proportion;
}
getIconOverview();
//====折线图
async function getStudent() {
  const result = await axios({ url: "/student/list" });
  getName(result.data.data);
  getPie(result.data.data);
}
getStudent();
async function getName(studentList) {
  const listName = studentList.map((item) => item.name);
  const listSalary = studentList.map((item) => item.salary);
  const listTruesalary = studentList.map((item) => item.truesalary);
  //折线图
  const myChart = echarts.init(document.querySelector(".line"));

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: "薪资",
    },
    tooltip: {
      trigger: "axis",
    },
    //底部滑块
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
      {
        type: "inside",
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
    ],
    //图例组件
    legend: {},
    //正上方图标
    toolbox: {
      show: true,
    },
    //x轴
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: listName,
    },
    //y轴
    yAxis: {
      type: "value",
    },
    //线条
    series: [
      {
        name: "期望薪资",
        type: "line",
        data: listSalary,
        smooth: true,
        //实心圆
        symbol: "circle",

        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
      {
        name: "实际薪资",
        type: "line",
        data: listTruesalary,
        smooth: true,
        symbol: "circle",
        //标线
        markLine: {
          data: [
            { type: "average", name: "Avg" },
            [
              {
                symbol: "none",
                x: "90%",
                yAxis: "max",
              },
              {
                symbol: "circle",
                label: {
                  position: "start",
                  formatter: "Max",
                },
                type: "max",
                name: "最高点",
              },
            ],
          ],
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
//=====柱状图
async function getHistogram(batch = 1) {
  const result = await axios({ url: "/score/batch", params: { batch } });
  console.log(result);
  const { group, avgScore, lt60, gt60, gt80 } = result.data.data;
  //柱状图
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".barChart"));

  // 指定图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    grid: {
      // top 设置 图表距离 顶部距离
      // bottom 设置 图表距离 底部距离
      top: 20,
      bottom: 20,
    },
    legend: {
      data: ["平均值", "小于60分人数", "大于60之间的人数", "80分以上的人数"],
    },
    xAxis: [
      {
        type: "category",
        data: group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: "Precipitation",
        min: 0,
        max: 100,
        interval: 50,
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",
        min: 0,
        max: 10,
        interval: 5,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        name: "平均值",
        type: "bar",
        data: avgScore,
      },
      {
        name: "小于60分人数",
        type: "bar",
        yAxisIndex: 1,
        data: lt60,
      },
      {
        name: "大于60之间的人数",
        type: "bar",
        yAxisIndex: 1,
        data: gt60,
      },
      {
        name: "80分以上的人数",
        type: "bar",
        yAxisIndex: 1,
        data: gt80,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
getHistogram();
//=====点击切换成绩面板
const toggleBatchBtn = document.querySelector("#toggleBatchBtn");
const batchUl = document.querySelector("#batch");
toggleBatchBtn.addEventListener("click", function (e) {
  batchUl.classList.toggle("show");
});
batchUl.addEventListener("click", function (e) {
  if (e.target.nodeName === "A") {
    const batch = e.target.dataset.index;
    getHistogram(batch);
  }
});
//饼图
//获取dom元素
const pie = document.querySelector(".pie");

function getPie(list) {
  const newList = [];
  for (let index = 0; index < list.length; index++) {
    const ele = list[index];
    //当 findIndex 符合元素的条件时会返回元素的索引位置   没有符合条件的元素返回-1
    //在新的数组里面进行遍历 查找下标
    const i = newList.findIndex((item) => item.name === ele.province);
    if (i === -1) {
      //判断如果新数组的下标完全等于-1 没有添加过  则新进 push
      newList.push({ value: 1, name: ele.province });
    } else {
      //如果已经添加过 就进行value值++
      newList[i].value++;
    }
  }
  //图表
  const myChart = echarts.init(document.querySelector(".pie"));
  const option = {
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [25, 100],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: newList,
      },
    ],
  };
  myChart.setOption(option);
}
//地图
